<template>
  <view class="sidebar-module">
    <u-popup :show="show" :safeAreaInsetTop="true" mode="left" @close="close" customStyle="width: 310px; background: #F6F6F6;">
      <view class="logo-box">
        <u-image src="@/static/logo_sidebar.png" width="165px" height="30px"></u-image>
      </view>
      <view class="box">
        <!-- <view class="cell-line">
          <view
            class="iconfont icon-shangchengxuanzhong shop-icon icon-box"
          ></view>
          <view class="cell-text">Shop</view>
          <view class="iconfont icon-jiantou-you arrow-icon"></view>
        </view> -->
        <!-- 约会 -->
        <view class="cell-line" @click="goPage('dating')">
          <view class="iconfont icon-hezuo1 dating-icon icon-box"></view>
          <view class="cell-text">{{ $t('discover.make-friends') }}</view>
          <view class="iconfont icon-jiantou-you arrow-icon"></view>
        </view>
        <!-- 悬赏 -->
        <view class="cell-line" @click="goPage('reward')">
          <view class="iconfont icon-jifenguizeguankong offer-icon icon-box"></view>
          <view class="cell-text">{{ $t('discover.Offer-a-reward') }}</view>
          <view class="iconfont icon-jiantou-you arrow-icon"></view>
        </view>
        <!-- 交易中心 -->
        <view class="cell-line" @click="goPage('information')">
          <view class="iconfont icon-xianzhi transaction-icon icon-box"></view>
          <view class="cell-text">{{ $t('discover.information') }}</view>
          <view class="iconfont icon-jiantou-you arrow-icon"></view>
        </view>
        <!-- 招聘 -->
        <view class="cell-line" @click="goPage('recruitment')">
          <view class="iconfont icon-gongwenbao recruitment-icon icon-box"></view>
          <view class="cell-text">{{ $t('discover.Recruitment') }}</view>
          <view class="iconfont icon-jiantou-you arrow-icon"></view>
        </view>
        <!-- <view class="cell-line">
          <view class="iconfont icon-huodong activity-icon icon-box"></view>
          <view class="cell-text">Activity</view>
          <view class="iconfont icon-jiantou-you arrow-icon"></view>
        </view>
        <view class="cell-line">
          <view class="iconfont icon-tuisong leasing-icon icon-box"></view>
          <view class="cell-text">Leasing</view>
          <view class="iconfont icon-jiantou-you arrow-icon"></view>
        </view> -->
        <!-- 交易中心 -->
        <view class="cell-line" @click="goPage('transaction')">
          <view class="iconfont icon-quan quan-icon icon-box"></view>
          <view class="cell-text">{{ $t('discover.exchange') }}</view>
          <view class="iconfont icon-jiantou-you arrow-icon"></view>
        </view>
        <view class="cell-line" @click="goPage('shopping')">
          <view class="iconfont icon-quan quan-icon icon-box"></view>
          <view class="cell-text">{{ $t('discover.shop') }}</view>
          <view class="iconfont icon-jiantou-you arrow-icon"></view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { queryChangeip } from '@/services/login';
export default {
  name: 'SidebarModule',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  // data() {
  //   return {
  //     show: false,
  //   };
  // },
  methods: {
    close() {
      this.$emit('closeSidebar');
    },
    goPage(val) {
      switch (val) {
        case 'dating':
          uni.switchTab({
            url: '/pages/makefriends/MakeFriends'
          });
          break;
        case 'transaction':
          queryChangeip().then((res) => {
            console.log(res);
            if (res.result.data === '中国') {
              uni.showToast({
                title: this.$t('newDeal.msg'),
                icon: 'none'
              });
            } else {
              uni.navigateTo({
                url: '/pagesUser/bourse/bourse'
              });
            }
          });

          break;
        case 'recruitment':
          uni.navigateTo({
            url: '/pagesDiscover/recruitment/Recruitment'
          });
          break;
        case 'reward':
          uni.navigateTo({
            url: '/pagesDiscover/reward/Reward'
          });
          break;
        case 'information':
          uni.navigateTo({
            url: '/pagesDiscover/information/Information'
          });
          break;
        case 'shopping':
          uni.navigateTo({
            url: '/sub_shop/shophome/shophome'
          });
          break;
        default:
          break;
      }
      this.close();
    }
  }
};
</script>

<style lang="scss" scoped>
.sidebar-module {
  .logo-box {
    box-sizing: border-box;
    padding: 42upx 0;
    width: 100%;
    background: #ffffff;
    display: flex;
    justify-content: center;
  }

  .box {
    margin-top: 20upx;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    padding: 0 30upx;

    &.box > view:nth-last-child(1) {
      border-bottom: none;
    }

    .cell-line {
      width: 100%;
      height: 120upx;
      display: flex;
      align-items: center;
      border-bottom: 2upx solid #f6f6f6;

      .icon-box {
        width: 56upx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .shop-icon {
        color: #795edd;
        font-size: 34upx;
      }

      .dating-icon {
        color: #be75c1;
        font-size: 36upx;
      }

      .offer-icon {
        color: #6ab2e5;
        font-size: 36upx;
      }

      .transaction-icon {
        color: #69da94;
        font-size: 44upx;
      }

      .recruitment-icon {
        color: #f5a527;
        font-size: 34upx;
      }

      .activity-icon {
        color: #f1513c;
        font-size: 34upx;
      }

      .leasing-icon {
        color: #68d5bf;
        font-size: 48upx;
      }

      .quan-icon {
        color: #6ab2e5;
        font-size: 44upx;
      }

      .cell-text {
        flex: 1;
        margin-left: 30upx;
        font-size: 30upx;
        font-weight: 400;
        color: #000000;
      }

      .arrow-icon {
        color: #a6a6a6;
        font-size: 30upx;
      }
    }
  }
}
</style>
